<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    引入jquery-->
    <script src="../../../js/jquery-3.3.1.js"></script>
</head>
<body>
<table id="tab1" border="1" width="800" align="center">
    <tr>
        <td colspan="5"><input type="button" value="删除"></td>
    </tr>
    <tr style="background-color: #999999;">
        <th><input type="checkbox" onclick="selectAll(this)"></th>
        <th>分类ID</th>
        <th>分类名称</th>
        <th>分类描述</th>
        <th>操作</th>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>0</td>
        <td>手机数码</td>
        <td>手机数码类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>1</td>
        <td>电脑办公</td>
        <td>电脑办公类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>2</td>
        <td>鞋靴箱包</td>
        <td>鞋靴箱包类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>3</td>
        <td>家居饰品</td>
        <td>家居饰品类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
</table>
</body>
<script>
    /**
     * 这个是当页面加载成功后，就执行这里的东西
     */
    $(function (){
        /** 案列一
         * 现在要控制单双行的背景颜色不一样
         * 1.先看结构，看要控制的是那个组件或者标签，比如我们这里是要控制tr（使用选择器）
         * 2.找到目标组件后，就可以动手来进行过滤了
         * 3.要想单双行不同，最简单的方式就是使用奇数偶数过滤
         */
        //我这里使用标签选择器，先试试看 可以发现不行
        // $("tr")[0].css("color", "blue")
        /**
         * 那就切换一个选择器 ，用索引过滤选择器来实现
         * 1号索引位置，是标题，所以我们应该要从1号索引之后的位置开始
         * 没有效果，是我的jquery没有正确的引入
         * 为了后面所有的tr都可以被控制，所有可以选择大于小于过滤器来进行操作(不包括当前索引的）
         * 可以控制所有的tr后，那么就可以使用奇数偶数过滤，来进行操作了
         * 奇数 odd
         * 偶数 even
         * 要控制的是背景颜色，所有我们要操作背景属性，background
         */
        // $("#tab1 tr:eq(1)").css("font-size","50px")
        $("#tab1 tr:gt(1):odd").css("background","green")
        $("#tab1 tr:gt(1):even").css("background","yellow")

        /**
         * 那些jQuery适合放在  $(function (){});里面
         * 需要页面一加载成功，就得有效果的语句，比如一些数据或者样式
         */
    })
</script>
</html>